<template>
  <div class="water">
    <div class="left">
      <template v-for="(item,index) in good_list.left">
        <GoodCard :key="index" :item="item"/>
      </template>
      
    </div>
    <div class="right">
      <template v-for="(item,index) in good_list.right">
        <GoodCard :key="index" :item="item"/>
      </template>
    </div>
  </div>
</template>

<script>
import GoodCard from "./GoodCard";
export default {
  props:{
    list:Array
  },
  components: {
    GoodCard
  },
  computed:{
    good_list(){
      let left = [];
      let right = [];
      for(let i in this.list){
        if(i%2===0){
          left.push(this.list[i])
        }else{
          right.push(this.list[i])
        }
      }
      return {
        left,right
      }
    },
  }
};
</script>

<style lang="less" scoped>
.water {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0.2rem 0;

  .left {
    flex: 1;
    // background-color: #eee;
    padding-right: 0.05rem;
  }
  .right {
    flex: 1;
    // background-color: #ddd;
    padding-left: 0.05rem;
  }
}
</style>